<script setup lang="ts">
  import {ref, toRef, toRefs, computed} from 'vue' // 可以定义基本类型和对象类型的响应式数据
  import {reactive} from 'vue' // 只能定义对象类型的响应式数据

  let employee = reactive({
    name: '曹梓童',
    position: '开发岗',
    introduction:''
  })

  // 将reactive的对象中每一个属性转为ref的基本属性
  let {name, position} = toRefs(employee)

  let p = toRef(employee,'position')
  console.log(p)

  let firstName = ref('肠道')

  let lastName = ref('生物')


  function changeName() {
    name.value = '王江'
  }

  function changePosition() {
    position.value = '技术渲染'
    console.log(employee.position)
  }

  function changeFull() {
    full.value = '胃镜-器材'
  }

  // 计算属性有缓存，如果使用方法则没有
  let full = computed({
    get() {
      return firstName.value + '-' + lastName.value
    },
    set(val) {
      let [f1, f2] = val.split('-')
      firstName.value = f1
      lastName.value = f2
      console.log('修改方法调用了',val)
    },
  })
</script>

<template>
  <div class="employee">
    <h2>员工名称:{{employee.name}}</h2>
    <h2>员工职位:{{employee.position}}</h2>
    <button @click="changeName">修改名称</button>
    <button @click="changePosition">修改职位</button>

    <hr>
    疾病：<input type="text" v-model="firstName"> <br>
    分类：<input type="text" v-model="lastName"> <br>
    综合：<span>{{ full }}</span> <br>
    <button @click="changeFull">替换器材胃镜</button>
  </div>
</template>

<style scoped>
  .employee {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }
</style>